<template>
	<view class="form-wrap">

		<!-- {{ formData }} -->
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">

			<div v-for="(item, index) in inputlist" :key="index" :style="[boxstyle(item, index)]">
				<!-- {{ item }} -->
				<formselect v-if="item.type == 'select'" :item="item" :data="formData" v-model="formData[item.value]">
				</formselect>


				<forminput v-else :item="item" :data="formData" v-model="formData[item.value]"></forminput>
			</div>
		</u--form>
	</view>
</template>

<script>
	import forminput from "./components/forminput.vue";
	import formselect from "./components/formselect.vue";
	import qs from "qs";

	export default {
		name: "formz",
		components: {
			forminput,
			formselect,
		},
		props: {
			data: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			inputs: {
				typeof: Array,
				default: () => {
					return [];
				},
			},
			setdefaultValuefalg: {
				typeof: Boolean,
				default: false,
			},
		},
		asyncComputed: {},
		computed: {
			inputlist() {
				return this.inputs
			},
			rules() {
				let r = {};
				if (!this.inputlist) {
					return {};
				}
				this.inputlist.forEach((e) => {
					let rules = e.rules || e.rule || false;
					if (rules) {
						r[e.value] = rules.map((e) => {
							return {
								...e,
								trigger: "blur",
							};
						});
					} else if (e.required) {
						r[e.value] = [{
							required: true,
							message: "请输入" + e.label,
							trigger: "blur"
						}, ];
					} else if (e.type == "yzm") {
						r[e.value] = [{
							required: true,
							message: "请输入" + e.label,
							trigger: "blur"
						}, ];
					}
				});

				return r;
			},
		},
		watch: {
			inputlist: {
				handler(n, o) {
					if (!n) {
						return;
					}
					o = o || [];

					const isEqual = (obj1, obj2) =>
						qs.stringify(obj1) === qs.stringify(obj2);
					let edtinputso = new Set([
						...o.filter((e) => !n.some((f) => isEqual(e, f))),
					]);

					let edtinputs = new Set([
						...n.filter((e) => !o.some((f) => isEqual(e, f))),
					]);

					if (
						!this.setdefaultValuefalg &&
						Object.keys(this.data).length != 0 &&
						qs.stringify(this.formData) == qs.stringify(this.data)
					) {
						return;
					}

					if (
						!(
							Object.keys(this.data).length != 0 &&
							qs.stringify(this.formData) == qs.stringify(this.data)
						)
					) {
						edtinputso.forEach((e) => {
							delete this.formData[e.prop];
						});
					}

					if (
						Object.keys(this.data).length != 0 &&
						qs.stringify(this.formData) == qs.stringify(this.data)
					) {

						edtinputs.forEach((e) => {
							if (!e.value) {
								return;
							}
							if (!Object.keys(this.formData).includes(e.value)) {
								// state.formData[e.value] = "";

								this.$set(this.formData, e.value, "");
							}
							if (this.formData[e.value] || this.formData[e.value] == "0") {

							} else if (e.defaultValue) {
								this.$set(this.formData, e.value, e.defaultValue);
								// this.formData[e.value] = e.defaultValue;
							}
						});
					} else {

						edtinputs.forEach((e) => {
							if (!e.value) {
								return;
							}

							if (!Object.keys(this.formData).includes(e.value)) {
								// this.formData[e.value] = "";
								this.$set(this.formData, e.value, "");
							}
							if (
								e.defaultValue ||
								e.defaultValue == "0" ||
								e.defaultValue == ""
							) {
								this.$set(this.formData, e.value, e.defaultValue);
								// this.formData[e.value] = e.defaultValue;
							}
						});
					}
				},
				deep: true,
			},
			data: {
				handler(n, o) {
					this.formData = this.$u.deepClone(this.data)
				},
				immediate: true,
			},
			rules: {
				handler() {
					if (this.$refs.uForm) {
						this.$refs.uForm.setRules(this.rules);
					}
				},
				deep: true,
			},
		},
		data() {
			return {
				inputFlag: true,
				formData: {},
			};
		},
		methods: {
			boxstyle(item, index) {
				let r = {};
				if (item.iscard == "before") {
					r.borderTopLeftRadius = "10rpx";
					r.borderTopRightRadius = "10rpx";
					r.background = "#fff";
					// r.margin = "20rpx 20rpx 0 20rpx";
					r.padding = "0 32rpx";
				}
				if (item.iscard == "after") {
					r.borderBottomLeftRadius = "10rpx";
					r.borderBottomRightRadius = "10rpx";
					r.background = "#fff";
					// r.margin = "0rpx 20rpx 20rpx 20rpx";
					r.padding = "0 32rpx";
				}
				if (item.iscard == "card") {
					r.borderRadius = "10rpx";
					r.background = "#fff";
					// r.margin = "20rpx";
					r.padding = "0 32rpx";
				}
				let itembeforelist = this.inputlist.slice(0, index);
				itembeforelist = itembeforelist.reverse();
				let isbeforeiscard = itembeforelist.find((e) => {
					return e.iscard == "before" || e.iscard == "after";
				});
				if (isbeforeiscard && isbeforeiscard.iscard == "before") {
					r.background = "#fff";
					// r.margin = "0 20rpx";
					r.padding = "0 32rpx";
				}
				return r;
			},
			async validate(e) {
				await this.$refs.uForm.validate();
				return this.formData;
			},
		},
		mounted() {
			// setTimeout(() => {
			//   // this.formData.type = "1";
			//   console.log(123456);
			// }, 1000);
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules);
		},
	};
</script>
<style scoped lang="scss">
	page {
		background: #f2f4f5;
	}
</style>